<template>
	<view>
		<!-- 加载动画 -->
		<mix-loading v-if="dataLoading" />
		<view class="mx-30 my-32">
			<text class="font-32 font-bold mr-12">{{ orderInfo.wholeUserState | setStatus }}</text>
			<u-icon name="arrow-right" font-size="24" color="#999"></u-icon>
		</view>
		<x-skeleton type="list" :loading="dataLoading" :configs="{gridRows: 1, gridColumns:1}"></x-skeleton>
		<view v-if="!dataLoading" class="content-box bgc-white mx-30 my-30 p-30 pb-80">
			<view class="mb-24 font-bold">
				{{ orderInfo.shopInfo.name }}
			</view>
			<!-- 商品列表 -->
			<u-read-more ref="uReadMore" show-height="460" toggle close-text="展开更多" color="#999" text-indent="0">
				<view v-for="(item, index) in orderInfo.orderTakeawayCommodityList" :key="index">
					<view class="g-item">
						<image :src="$ut.setImgae(item.shopCommodity.image)"></image>
						<view class="right">
							<view class="flex items-center">
								<view class="title clamp line-1">{{item.shopCommodity.name}}</view>
								<!-- // 只为了样式占位 -->
								<view class="underlined-price" style="opacity: 0;">
									{{item.shopCommodity.originalPrice}}
								</view>
								<view class="price font-28">{{item.price}}</view>
							</view>
							<view class="spec">{{item.commoditySpecs}}</view>
							<view class="price-box">
								<text class="number">x {{item.number}}</text>
							</view>
						</view>
					</view>
				</view>
			</u-read-more>
			<view class="line" />
			<view class="flex items-center justify-between mt-24 font-24">
				<view>打包费</view>
				<view>¥{{ orderInfo.packingCharge }}</view>
			</view>
			<view class="flex items-center justify-between mt-24 font-24">
				<view>配送费</view>
				<view>¥{{ orderInfo.deliveryPrice }}</view>
			</view>
			<template v-if="typeof orderInfo.discountDetails === 'object'">
				<view class="flex items-center justify-between mt-24 font-24"
					v-if="orderInfo.discountDetails.hasOwnProperty('firstOrderPrice') && orderInfo.discountDetails.firstOrderPrice != null">
					<view>首单优惠</view>
					<view>
						<text style="color: #FF0909;">-</text>
						<text class="price font-24">{{ orderInfo.discountDetails.firstOrderPrice }}</text>
					</view>
				</view>
				<view class="flex items-center justify-between mt-24 font-24"
					v-if="orderInfo.discountDetails.hasOwnProperty('fullReduction')">
					<view>满减优惠</view>
					<view>
						<text style="color: #FF0909;">-</text>
						<text class="price font-24">{{ orderInfo.discountDetails.fullReduction.givePrice }}</text>
					</view>
				</view>
			</template>
			<view class="line my-32" />
			<view class="flex justify-end mt-24">
				<view>
					<text class="mr-12">合计</text>
					<text class="price font-32" style="color: #333;">{{ orderInfo.price }}</text>
				</view>
			</view>
			<view class="tel-box flex items-center justify-center mt-24 font-24" @tap="callTel(orderInfo.shopInfo.phone)">
				<view class="">
					<u-icon name="phone-fill"></u-icon>
					<text class="ml-12">致电商家</text>
				</view>
			</view>
		</view>

		<template v-if="true">
			<x-skeleton type="text" :loading="dataLoading" :configs="{gridRows: 1, gridColumns:1}"></x-skeleton>
			<view v-if="!dataLoading" class="content-box bgc-white mx-30 my-30 p-30 pb-80">
				<view class="mb-12 font-bold flex items-center justify-between">
					<view>配送信息</view>
					<view> {{ orderInfo.deliveryState | formatDeliveryState }} </view>
				</view>
				<template v-if="orderInfo.orderDeliveryList != null">
					<view  v-for="(item,index) in orderInfo.orderDeliveryList" class="flex items-center justify-between mt-24 font-24" :key="index">
						<view>配送骑手</view>
						<view>{{ item.deliveryInfo.fullName }}</view>
					</view>
					<view class="flex items-center justify-between mt-24 font-24">
						<view>接单时间</view>
						<view>{{ orderInfo.connectTime }}</view>
					</view>
					<view class="flex items-center justify-between mt-24 font-24">
						<view>取餐时间</view>
						<view>{{ orderInfo.pickingTime || '暂无' }}</view>
					</view>
					<view class="flex items-center justify-between mt-24 font-24">
						<view>送达时间</view>
						<view>{{ orderInfo.reachTime || '暂无' }}</view>
					</view>
				</template>
				<view class="flex items-start justify-between mt-24 font-24">
					<view>配送地址</view>
					<view class="text-right">
						<view class="address-box">
							{{orderInfo.comSchool.address}}-{{orderInfo.comSchool.name}}-{{orderInfo.comSchoolBuilding.name}}-{{orderInfo.userAddress}}
						</view>
						<view class="mt-12">
							<text class="mr-12">{{ $ut.formatName(orderInfo.contacts) }}</text>
							<text>{{ $ut.formatPhone(orderInfo.phone) }}</text>
						</view>
					</view>
				</view>
				<view class="tel-box flex items-center justify-center mt-24 font-24">
					<view v-if="orderInfo.orderDeliveryList != null" @tap="callTel(orderDeliveryList[orderDeliveryList.length -1].deliveryInfo.phone)">
						<u-icon name="phone-fill"></u-icon>
						<text class="ml-12">致电骑手</text>
					</view>
					<template v-else>
						<u-icon name="info-circle-fill" color="#f0ad4e"></u-icon>
						<text class="ml-12" style="color: #f0ad4e;">暂无骑手接单</text>
					</template>
				</view>
			</view>
		</template>

		<x-skeleton type="text" :loading="dataLoading" :configs="{gridRows: 1, gridColumns:1}"></x-skeleton>
		<view v-if="!dataLoading" class="content-box bgc-white mx-30 my-30 p-30">
			<view class="mb-12 font-bold flex items-center justify-between">
				<view>订单信息</view>
				<view> {{ orderInfo.shopState | formatShopState }} </view>
			</view>
			<view class="flex items-center justify-between mt-24 font-24">
				<view>订单编号</view>
				<view>
					<text selectable>{{ orderInfo.id }}</text>
				</view>
			</view>
			<view class="flex items-center justify-between mt-24 font-24">
				<view>下单时间</view>
				<view>{{ orderInfo.createTime }}</view>
			</view>
			<view class="flex items-center justify-between mt-24 font-24">
				<view>出餐时间</view>
				<view>{{ orderInfo.diningTime || '暂无' }}</view>
			</view>
			<view class="flex items-center justify-between mt-24 font-24">
				<view>支付方式</view>
				<view>{{ orderInfo.payState == 1 ? '储蓄支付' : '微信支付' }}</view>
			</view>
		</view>
		<view class="flex justify-center mt-30 pb-30">
			<template v-if="orderInfo.shopState == 0 && orderInfo.deliveryState == 0">
				<view class="btn-box" type="chargeback" hover-class="hover-class" hover-stay-time="150"
					@click.stop="userApplyOrderTakeawayCancellation(orderInfo)">
					{{ orderInfo.shopState == 0 && orderInfo.deliveryState == 0 && orderInfo.payState == 1 ? '取消订单' : '平台审核' }}</view>
			</template>
			<template v-if="orderInfo.payState == 0 && orderInfo.deliveryState == 0">
				<view class="btn-box" type="pay" hover-class="hover-class" hover-stay-time="150">立即支付</view>
			</template>
			<template v-if="orderInfo.payState == 1 && orderInfo.deliveryState == 3 && orderInfo.shopState == 2">
				<view class="btn-box" type="service" hover-class="hover-class" hover-stay-time="150">确认送达</view>
			</template>
			<template v-if="orderInfo.payState == 2 && orderInfo.deliveryState == 3">
				<view v-if="orderInfo.isEvaluate != 1" class="btn-box" hover-class="hover-class" hover-stay-time="150" @click.stop="toComment(item)">评价</view>
				<view class="btn-box" type="chargeback" hover-class="hover-class" hover-stay-time="150">退单</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {},
				dataLoading: true,
				current: 0
			}
		},
		onLoad(e) {
			this.current = e.current;
			this.getOrderTakeawayToUser(e.id);
		},
		filters: {
			setStatus(val) {
				let statusText;
				switch (val) {
					case 0:
						statusText = '待支付'
						break;
					case 1:
						statusText = '待完成'
						break;
					case 2:
						statusText = '待评价'
						break;
					case 3:
						statusText = '退款/售后'
						break;
					default:
						statusText = '已完成'
						break;
				}
				return statusText;
			},
			formatDeliveryState(val) {
				let statusText;
				switch (val) {
					case 0:
						statusText = '未配送'
						break;
					case 1:
						statusText = '已接单/取餐中'
						break;
					case 2:
						statusText = '已取餐/配送中'
						break;
					case 3:
						statusText = '已送达'
						break;
					default:
						statusText = '骑手跑丢了'
						break;
				}
				return statusText;
			},
			formatShopState(val) {
				let statusText;
				switch (val) {
					case 0:
						statusText = '出餐中;'
						break;
					case 1:
						statusText = '已出餐'
						break;
					case 2:
						statusText = '已完成'
						break;
					case 3:
						statusText = '取消订单'
						break;
					case 4:
						statusText = '取消完成'
						break;
					default:
						statusText = '未知状态'
						break;
				}
				return statusText;
			},
		},
		methods: {
			// 取消订单
			userApplyOrderTakeawayCancellation(item) {
				const {
					id,
					payState
				} = item;
				if( payState == 3) return this.$u.toast('等待平台审核...');
				this.$u.api.userApplyOrderTakeawayCancellation({
					orderTakeawayId: id
				}).then(res => {
					uni.showToast({
						title: '申请成功，等待平台审核'
					})
					this.orderInfo.payState = 3;
				})
			},
			async getOrderTakeawayToUser(id) {
				const data = await this.$u.api.getOrderTakeawayToUser({
					id
				});
				this.orderInfo = data.dataList[0];
				this.orderInfo.discountDetails = JSON.parse(this.orderInfo.discountDetails);
				this.dataLoading = false;
				console.log(this.orderInfo);
			},
			// 打电话
			callTel(tel) {
				// #ifdef H5
				window.location.href = 'tel://' + tel;
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f8;
	}

	.content-box {
		box-shadow: 0 0 20rpx 2rpx rgba(100, 100, 100, 0.1);
		border-radius: 16rpx;
		position: relative;
		overflow: hidden;

		.tel-box {
			position: absolute;
			background-color: #f9f9f9;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 12rpx 0;
		}
	}

	.btn-box {
		border: 1rpx solid #c7c7c7;
		text-align: center;
		width: 690rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		border-radius: 16rpx;
		margin-left: 12rpx;
	}

	.btn-box[type='chargeback'] {
		border-color: $uni-color-error;
		color: $uni-color-error;
	}

	.btn-box[type='service'] {
		border-color: $uni-color-primary;
		color: $uni-color-primary;
	}

	.btn-box[type='pay'] {
		border-color: $uni-color-warning;
		background-color: $uni-color-warning;
		color: #333;
		font-weight: bold;
	}

	.line {
		border: 1rpx dashed rgba(100, 100, 100, 0.08) !important;
	}

	.g-item {
		display: flex;
		margin-bottom: 20rpx;

		image {
			flex-shrink: 0;
			display: block;
			width: 160upx;
			height: 160upx;
			border-radius: 16rpx;
		}

		.underlined-price {
			color: #999;
			text-decoration: line-through;
			margin: 0 12rpx;

			&::before {
				content: '¥';
			}
		}

		.right {
			flex: 1;
			padding-left: 24upx;
			overflow: hidden;

			.over-title {
				// width: 408rpx;
			}
		}

		.title {
			width: 300rpx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.spec {
			font-size: 26upx;
			color: $font-color-light;
		}

		.price-box {
			display: flex;
			align-items: center;
			font-size: 32upx;
			color: $font-color-dark;
			// padding-top: 10upx;

			.price {
				margin-bottom: 4upx;
			}

			.number {
				font-size: 26upx;
				color: $font-color-base;
				// margin-left: 20upx;
			}
		}

		.step-box {
			position: relative;
		}
	}

	.address-box {
		width: 500rpx;
		text-align: right;
	}
</style>